import AppContainer from '@/components/AppContainer';
import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import useList from '@/hooks/useList';
import { queryApps } from '@/service/deliver';
import { queryNoticeList } from '@/service/globalSetting';
import { PlusOutlined } from '@ant-design/icons';
import { CopyToClipboard } from 'react-copy-to-clipboard';

import { Button, Card, Form, Input, message, Select, Space, Table, Tag } from 'antd';
import { ColumnsType } from 'antd/lib/table';

import React from 'react';
import SaveNotice from './components/SaveNotice';

const RenderNoticeType = ({ name, _, noticeType, text }: any) => {
  return <div>
    {noticeType.includes(name) && <div>
      <Tag color='green'>{text}</Tag>
      <div>
        {_[`${name}Mode`] === `${name}Api` ? <div>
          <h3>api推送</h3>
          <div>
            推送人： {_[`${name}Receive`]}
          </div>
        </div> : <div>
          <h3>api推送</h3>
          <div>
            webhook地址：  *******
          </div>
        </div>

        }
        <p></p>
      </div>
    </div>}
  </div>
}

const App = () => {
  const { tableProps, search, refresh } = useAntdList(queryNoticeList, {})
  const saveNotice = useAntdModal({ refresh })
  let [form] = Form.useForm()
  const columns: ColumnsType<any> = [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: '名称',
    dataIndex: 'title'
  }, {
    title: '详细',
    render(_) {
      const noticeType = _.noticeType || ''
      return <div>
        <RenderNoticeType _={_} noticeType={noticeType} name='feishu' text='飞书' />

      </div>
    }
    // dataIndex: 'type'
  }, {
    title: '创建时间',
    dataIndex: 'createdAt'
  }, {
    title: '更新时间',
    dataIndex: 'updatedAt'
  }, {
    title: '操作',
    render(_) {
      return <Space>
        <Button type='link' onClick={() => saveNotice.openModal({
          ..._,
          noticeType: _.noticeType ? _.noticeType.split(',') : []
        }, { title: '编辑通知' })}>编辑</Button>
        <CopyToClipboard 
        onCopy={()=>{
            message.success('复制成功')
        }}
        text={`http://all-round-devtest.weillan.xyb2b.com/api/open/v1/webhook/bot?id=${_.id}`}>

        <Button type='link'>复制链接</Button>
        </CopyToClipboard>
      </Space>
    }
  }
  ]
  console.log('tablePorps', tableProps)
  return (<AppContainer queryFilter={
    <QueryFilter form={form} submit={search.submit} reset={search.reset} >
      <Form.Item label="名称"> <Input /></Form.Item>
      <Form.Item label="类型"> <Select options={[{
        value:'feishu',
        label:'飞书'
      },{
        value:'weixin',
        label:'微信'
      },{
        value:'dingding',
        label:'钉钉'
      }]} /></Form.Item>

    </QueryFilter>
  }>
    <Toolbar
      leftRender={<Button type='primary' icon={<PlusOutlined />}
        onClick={() => saveNotice.openModal({}, { title: '创建通知' })}
      >创建通知</Button>}
    />
    <SaveNotice {...saveNotice} />
    <Table
      rowKey="id"
      columns={columns}
      {...tableProps}

      onChange={(pagination) => {
        // setPage(pagination.current);
      }}
    // pagination={{ total, current: page, pageSize: 5, simple: true }}
    />
  </AppContainer>)
}
export default App